//获取元素
let tbody=document.querySelector('tbody')



async function getStudent(){
    let res=await axios({
        url:'/students'
    })
    // console.log(res);

tbody.innerHTML=res.data.data
.map(v=>{
    return`
    <tr>
                        <td>${v.name}</td>
                        <td>${v.age}</td>
                        <td>${v.gender===0?'男':'女'}</td>
                        <td>${v.group}</td>
                        <td>${v.hope_salary
                        }</td>
                        <td>${v.salary}</td>
                        <td>${v.province + v.city + v.area}</td>
                        <td><a href="javascript:;" class="text-success mr-3"><i data-id="${
                            v.id
                          }" class="bi bi-pen"></i></a>
                          <a  href="javascript:;" class="text-danger"><i data-id="${
                            v.id
                          }" class="bi bi-trash"></i></a></td>
                      </tr>
    `
})
.join('')

//设置学生的个数
document.querySelector('.total').innerHTML=res.data.data.length

}

getStudent()


//弹框 
let  modal = new bootstrap.Modal(document.querySelector('#modal'))
//1. 点击 添加  弹框
document.querySelector('#openModal').onclick=async function(){
    //修改标题
    // document.querySelector('.modal-title').innerHTML='添加学员'
    //保存  data-id=add
    // document.querySelector('#submit').dataset.id='add'

    // //清空表单
    // document.querySelector('#form').reset()
    //重置市区
    // await renderCity()
    // await renderArea()

    modal.show()
}
//初始省市区
//1.先获取省的数据
async function renderProvince (province=''){
    //省的ajax
    let res =await axios({
        url:'/api/province',
    })
    console.log(res);
    document.querySelector('[name=province]').innerHTML=res.data.data
    .map(v=>{
        return `<option value="${v}">${v}</option>`
    }).join('')
    // 如果传入了 省,选中对应的省 
    province !==''&&
    (document.querySelector('[name=province]').value=province)
}
//市
async function renderCity (city=''){
    let pname =document.querySelector('[name=province]').value
    //省的ajax
    let res =await axios({
        url:'/api/city',
        params:{
            pname
        }
    })
    console.log(res);
    document.querySelector('[name=city]').innerHTML=res.data.data
    .map(v=>{
        return `<option value="${v}">${v}</option>`
    }).join('')
    // 如果传入了 省,选中对应的省 
    city !==''&&
    (document.querySelector('[name=city]').value=city)
}
//区
async function renderArea (area=''){
    let pname =document.querySelector('[name=province]').value
    let cname =document.querySelector('[name=city]').value
    //省的ajax
    let res =await axios({
        url:'/api/area',
        params:{
            pname,
            cname
        }
    })
    console.log(res);
    document.querySelector('[name=area]').innerHTML=res.data.data
    .map(v=>{
        return `<option value="${v}">${v}</option>`
    }).join('')
    // 如果传入了 省,选中对应的省 
    area !==''&&
    (document.querySelector('[name=area]').value=area)
}






async   function  ct(){
await renderProvince()
await renderCity()
await renderArea()


}

ct()

//省市区联动
document.querySelector('[name=province]').onchange=
    async function(){
        
        await renderCity()
        await renderArea()
    }

    document.querySelector('[name=city]').onchange=
    async function(){
        
        await renderArea()
    }






